import React,{useState,useEffect} from 'react'
import { NavBar } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import "./Hs.css"
import { Button, Sticky } from '@nutui/nutui-react'
import axios from 'axios';


export default function Ranking() {
    let navigate = useNavigate()
    let [chengeFlag, setChangeFlag] = useState(true)
    let user = { id: 2, pid: "1" }
    useEffect(() => {
        get_id()
    }, [])
    let get_id = async () => {
        let id = localStorage.getItem("user_id")
        let { data } = await axios.get("http://127.0.0.1:3000/getuset_id?id=" + id)
        if (data.obj.name == "无") {
            data.obj.name = '用户' + id.slice(id.length - 4)
        }
        let arr = [...list]
        arr[1].img = data.obj.img
        arr[1].name = data.obj.name
        arr[1].km = data.obj.km
        setlist(arr)
    }
    let [list,setlist] = useState([
        { id: 1, pid: "1", img: "https://img0.baidu.com/it/u=791530853,3550892203&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 50.65, name: "喜羊羊" },
        { id: 2, pid: "1", img: "https://i0.hippopx.com/photos/179/171/625/sparkler-holding-hands-firework-thumb.jpg", km: 34.78, name: "星河在眼里" },
        { id: 3, pid: "1", img: "https://img1.baidu.com/it/u=425293790,651824378&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800", km: 78.90, name: "美羊羊" },
        { id: 4, pid: "1", img: "https://img2.baidu.com/it/u=1320604647,1678798061&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 23.45, name: "懒羊羊" },
        { id: 5, pid: "1", img: "https://img0.baidu.com/it/u=2922784866,1995204354&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800", km: 65.32, name: "沸羊羊" },
        { id: 6, pid: "1", img: "https://img1.baidu.com/it/u=4123912197,1760047115&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 89.10, name: "暖羊羊" },
        { id: 7, pid: "2", img: "https://img2.baidu.com/it/u=984265456,3644100843&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 45.67, name: "慢羊羊" },
        { id: 8, pid: "2", img: "https://img0.baidu.com/it/u=3818361963,2602125529&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 98.06, name: "红太狼" },
        { id: 9, pid: "2", img: "https://img2.baidu.com/it/u=4294518501,3513526528&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 12.34, name: "小灰灰" },
        { id: 10, pid: "2", img: "https://img1.baidu.com/it/u=4076791313,2325460782&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 56.78, name: "包包大人" },
        { id: 11, pid: "2", img: "https://img0.baidu.com/it/u=3033681654,2578144946&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 32.10, name: "潇洒哥" },
        { id: 12, pid: "2", img: "https://img2.baidu.com/it/u=3653442921,2669383680&fm=253&fmt=auto&app=120&f=JPEG?w=515&h=500", km: 74.32, name: "黑大帅" },
        { id: 13, pid: "2", img: "https://img2.baidu.com/it/u=3004047517,1606697462&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 67.89, name: "刀羊前辈" },
        { id: 14, pid: "2", img: "https://img2.baidu.com/it/u=3257918206,2601601616&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 21.09, name: "花羊羊" },
        { id: 15, pid: "2", img: "https://img0.baidu.com/it/u=3264243651,1382116143&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 85.43, name: "羚羊公主" },
        { id: 16, pid: "2", img: "https://img2.baidu.com/it/u=2168219671,990590819&fm=253&fmt=auto&app=120&f=JPEG?w=511&h=500", km: 43.21, name: "羚羊王子" },
        { id: 17, pid: "2", img: "https://img1.baidu.com/it/u=4148564018,1930444022&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 96.54, name: "泰哥" },
        { id: 18, pid: "2", img: "https://img0.baidu.com/it/u=3740115079,2978752218&fm=253&fmt=auto&app=120&f=JPEG?w=522&h=500", km: 19.87, name: "青蛙国王" },
        { id: 19, pid: "2", img: "https://img1.baidu.com/it/u=2284291159,1588119351&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 52.34, name: "兔小乐" },
        { id: 20, pid: "2", img: "https://img0.baidu.com/it/u=1271081969,2320401819&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 70.12, name: "智羊羊" },
        { id: 21, pid: "2", img: "https://img0.baidu.com/it/u=2365407653,1197845893&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750", km: 36.54, name: "丽羊羊" },
        { id: 22, pid: "2", img: "https://img2.baidu.com/it/u=1457880780,1716120615&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=575", km: 67.89, name: "小飞机" },
        { id: 23, pid: "2", img: "https://img2.baidu.com/it/u=4014644380,520719944&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=664", km: 29.10, name: "扁嘴伦" },
        { id: 24, pid: "2", img: "https://img0.baidu.com/it/u=2027092258,1972438959&fm=253&fmt=auto&app=120&f=JPEG?w=504&h=500", km: 51.23, name: "西域刀羊" },
        { id: 25, pid: "2", img: "https://img2.baidu.com/it/u=3741917945,3768731184&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=546", km: 87.65, name: "快羊羊" },
        { id: 26, pid: "2", img: "https://img2.baidu.com/it/u=1880793376,537158084&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 43.21, name: "软绵绵" },
        { id: 27, pid: "2", img: "https://img2.baidu.com/it/u=1673715894,3237127549&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667", km: 90.12, name: "机械羊" },
        { id: 28, pid: "2", img: "https://img2.baidu.com/it/u=4014644380,520719944&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=664", km: 15.67, name: "小香香" },
        { id: 29, pid: "1", img: "https://img2.baidu.com/it/u=926446100,2747354307&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667", km: 78.90, name: "蕉太狼" },
        { id: 30, pid: "1", img: "https://img2.baidu.com/it/u=1761145113,59816424&fm=253&fmt=auto&app=120&f=JPEG?w=506&h=500", km: 34.56, name: "夜太狼" },
        { id: 31, pid: "1", img: "https://img2.baidu.com/it/u=4037802001,1733612794&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 62.10, name: "白眼狼" },
        { id: 32, pid: "1", img: "https://img2.baidu.com/it/u=3741917945,3768731184&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=546", km: 27.89, name: "双叉狼" },
        { id: 33, pid: "1", img: "https://img0.baidu.com/it/u=123020064,1503144048&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1725901200&t=ad89539d11434dee055cea47a8582be8", km: 98.76, name: "浪浪狼" },
        { id: 34, pid: "1", img: "https://img0.baidu.com/it/u=676168730,1127567161&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1082", km: 54.32, name: "灰二太太狼" },
        { id: 35, pid: "1", img: "https://img0.baidu.com/it/u=2187199914,2071608444&fm=253&fmt=auto&app=120&f=JPEG?w=520&h=500", km: 85.43, name: "拳击狼" },
        { id: 36, pid: "1", img: "https://img1.baidu.com/it/u=4255815233,2322977746&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 42.10, name: "香太狼" },
        { id: 37, pid: "1", img: "https://img0.baidu.com/it/u=2857643948,2259143028&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 70.98, name: "小白狼" },
        { id: 38, pid: "1", img: "https://img0.baidu.com/it/u=1856162622,3006406279&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 0, name: "贝壳汉狼" },
        { id: 39, pid: "1", img: "https://img1.baidu.com/it/u=304731857,979801594&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 0, name: "千羊斩" },
        { id: 40, pid: "1", img: "https://img0.baidu.com/it/u=535380572,3652526819&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500", km: 0, name: "狼表哥" }
    ])
    return (
        <div>
            <NavBar style={{ position: "fixed", top: "0", width: "100vw", background: "white" }} onBack={() => { navigate(-1) }}>排名</NavBar>
            <div>
                <div style={{ textAlign: "center", marginTop: "40px" }}>
                    <button onClick={() => { setChangeFlag(true) }} className={chengeFlag ? 'hs_but_active' : 'hs_but'} style={{ padding: "5px 25px", margin: "20px 0" }}>同校榜</button>
                    <button onClick={() => { setChangeFlag(false) }} className={!chengeFlag ? 'hs_but_active' : 'hs_but'} style={{ padding: "5px 25px", margin: "20px 0" }}>全网榜</button>
                </div>
                {chengeFlag ? <div>
                    <div>
                        <div style={{ display: "flex", width: "80vw", height: "250px", overflow: "hidden", margin: "0 auto", justifyContent: "space-between" }}>
                            {list.filter(item => item.pid == user.pid).sort((x, y) => { return y.km - x.km }).slice(1, 2).map((i) => {
                                return <div style={{ textAlign: "center" }} key={i.id}>
                                    <img style={{ width: "65px", height: "65px", borderRadius: "50%", marginTop: "30px", border: "3px solid #f9a72d" }} src={i.img} alt="" />
                                    <p style={{ margin: "5px" }}>{i.name}</p>
                                    <div style={{ width: "90px", borderRadius: "10px", height: "200px", background: "#f9a72d" }}>
                                        <h3 style={{ color: "white", paddingTop: "10px" }}>{i.km}</h3>
                                        <h3 style={{ color: "white" }}>km</h3>
                                        <h1 style={{ color: "white", padding: "20px" }}>2</h1>
                                    </div>
                                </div>
                            })}
                            {list.filter(item => item.pid == user.pid).sort((x, y) => { return y.km - x.km }).slice(0, 1).map((i) => {
                                return <div style={{ textAlign: "center" }} key={i.id}>
                                    <img style={{ width: "65px", height: "65px", borderRadius: "50%", marginTop: "10px", border: "3px solid #e86166" }} src={i.img} alt="" />
                                    <p style={{ margin: "5px" }}>{i.name}</p>
                                    <div style={{ width: "90px", borderRadius: "10px", height: "200px", background: "#e86166" }}>
                                        <h3 style={{ color: "white", paddingTop: "10px" }}>{i.km}</h3>
                                        <h3 style={{ color: "white" }}>km</h3>
                                        <h1 style={{ color: "white", padding: "20px" }}>1</h1>
                                    </div>
                                </div>
                            })}
                            {list.filter(item => item.pid == user.pid).sort((x, y) => { return y.km - x.km }).slice(2, 3).map((i) => {
                                return <div style={{ textAlign: "center" }} key={i.id}>
                                    <img style={{ width: "65px", height: "65px", borderRadius: "50%", marginTop: "50px", border: "3px solid #578df2" }} src={i.img} alt="" />
                                    <p style={{ margin: "5px" }}>{i.name}</p>
                                    <div style={{ width: "90px", borderRadius: "10px", height: "200px", background: "#578df2" }}>
                                        <h3 style={{ color: "white", paddingTop: "10px" }}>{i.km}</h3>
                                        <h3 style={{ color: "white" }}>km</h3>
                                        <h1 style={{ color: "white", padding: "20px" }}>3</h1>
                                    </div>
                                </div>
                            })}
                        </div>
                        {list.filter(item => item.pid == user.pid).sort((x, y) => { return y.km - x.km }).slice(3, list.filter(item => item.pid == user.pid).length).map((i, index) => {
                            return <div className={i.id==user.id?"hs_bottom":""} key={i.id} style={{ display: "flex", justifyContent: "space-between", padding: "10px", alignItems: "center" }}>
                                    <div style={{ display: "flex", alignItems: "center" }}>
                                        <h3 style={{ width: "40px", textAlign: "center" }}>{index + 4}</h3>
                                        <img style={{ width: "50px", height: "50px", margin: "0px 10px", borderRadius: "50%" }} src={i.img} alt="" />
                                        <p>{i.name}</p>
                                    </div>
                                    <p style={{ color: "#9d9d9d", fontSize: "16px" }}>{i.km}km</p>
                            </div>
                        })}
                    </div>
                </div> : ""}
                {!chengeFlag ? <div>
                    <div>
                        <div style={{ display: "flex", width: "80vw", height: "250px", overflow: "hidden", margin: "0 auto", justifyContent: "space-between" }}>
                            {list.sort((x, y) => { return y.km - x.km }).slice(1, 2).map((i) => {
                                return <div style={{ textAlign: "center" }} key={i.id}>
                                    <img style={{ width: "65px", height: "65px", borderRadius: "50%", marginTop: "30px", border: "3px solid #f9a72d" }} src={i.img} alt="" />
                                    <p style={{ margin: "5px" }}>{i.name}</p>
                                    <div style={{ width: "90px", borderRadius: "10px", height: "200px", background: "#f9a72d" }}>
                                        <h3 style={{ color: "white", paddingTop: "10px" }}>{i.km}</h3>
                                        <h3 style={{ color: "white" }}>km</h3>
                                        <h1 style={{ color: "white", padding: "20px" }}>2</h1>
                                    </div>
                                </div>
                            })}
                            {list.sort((x, y) => { return y.km - x.km }).slice(0, 1).map((i) => {
                                return <div style={{ textAlign: "center" }} key={i.id}>
                                    <img style={{ width: "65px", height: "65px", borderRadius: "50%", marginTop: "10px", border: "3px solid #e86166" }} src={i.img} alt="" />
                                    <p style={{ margin: "5px" }}>{i.name}</p>
                                    <div style={{ width: "90px", borderRadius: "10px", height: "200px", background: "#e86166" }}>
                                        <h3 style={{ color: "white", paddingTop: "10px" }}>{i.km}</h3>
                                        <h3 style={{ color: "white" }}>km</h3>
                                        <h1 style={{ color: "white", padding: "20px" }}>1</h1>
                                    </div>
                                </div>
                            })}
                            {list.sort((x, y) => { return y.km - x.km }).slice(2, 3).map((i) => {
                                return <div style={{ textAlign: "center" }} key={i.id}>
                                    <img style={{ width: "65px", height: "65px", borderRadius: "50%", marginTop: "50px", border: "3px solid #578df2" }} src={i.img} alt="" />
                                    <p style={{ margin: "5px" }}>{i.name}</p>
                                    <div style={{ width: "90px", borderRadius: "10px", height: "200px", background: "#578df2" }}>
                                        <h3 style={{ color: "white", paddingTop: "10px" }}>{i.km}</h3>
                                        <h3 style={{ color: "white" }}>km</h3>
                                        <h1 style={{ color: "white", padding: "20px" }}>3</h1>
                                    </div>
                                </div>
                            })}
                        </div>
                        {list.sort((x, y) => { return y.km - x.km }).slice(3, list.length).map((i, index) => {
                            return <div  className={i.id==user.id?"hs_bottom":""} key={i.id} style={{ display: "flex", justifyContent: "space-between", padding: "10px", alignItems: "center" }}>
                                <div style={{ display: "flex", alignItems: "center" }}>
                                    <h3 style={{ width: "40px", textAlign: "center" }}>{index + 4}</h3>
                                    <img style={{ width: "50px", height: "50px", margin: "0px 10px", borderRadius: "50%" }} src={i.img} alt="" />
                                    <p>{i.name}</p>
                                </div>
                                <p style={{ color: "#9d9d9d", fontSize: "16px" }}>{i.km}km</p>
                            </div>
                        })}
                    </div>
                </div> : ""}
            </div>
        </div>
    )
}